<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/shouye/css/index.css" />
    <!-- font awesome矢量图标 -->
    <link
      href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <!-- animate动画 -->
    <link
      href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
    />
    <title>DIV-StudyGroup</title>
    <!-- 样式表 -->
    <style>
      /* 导航条 */
      .navbar-light {
        background-color: #fff;
      }

      .navbar-brand img {
        max-width: 70px;
        max-height: 150px;
        min-width: 60px;
      }

      a,
      a:visited {
        color: rgb(19, 126, 248);
      }

      a:hover {
        text-decoration: underline;
      }

      i {
        color: rgb(29, 108, 255);
        margin-right: 0.5em;
      }

      .nav-link {
        width: 200px;
        text-align: center;
      }

      .nav-item {
        width: 200px;
        text-align: center;
      }

      .dropdown-menu {
        border-top: 3px rgb(19, 126, 248) solid;
      }

      /* 精彩主题部分 */

      /* 页脚 */

      .contact {
        background-color: rgba(128, 128, 128, 0.397);
      }

      .contact ul {
        line-height: 2.5;
      }

      .copyright {
        background-color: rgb(207, 207, 207);
        color: #fff;
        height: 60px;
        line-height: 60px;
        font-size: 21px;
      }

      .copyright p {
        margin-bottom: 0rem;
      }

      .container-fluid img {
        width: 300px;
        height: 300px;
      }

      .column {
        column-count: 2;
      }
    </style>
  </head>

  <body>
    <!-- 页首 -->
    <header>
      <nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm">
        <div class="container">
          <a class="navbar-brand" href="#">
            <img src="shouye/image/dht.jpg" alt="DIV-StudyGroup" />
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#" style="padding-left: 130px;"
                  >首页 <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">团队简介</a>
              </li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  成员主页
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a
                    class="dropdown-item"
                    href="https://v.qq.com/x/cover/mzc002007fp7xwf/m0031qwt1tr.html"
                    >杨澎锴</a
                  >
                  <a class="dropdown-item" href="#">黄耀锌</a>
                  <a class="dropdown-item" href="#">钟敏烨</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">覃美瑛</a>
                  <a class="dropdown-item" href="#">张姚姚</a>
                  <a class="dropdown-item" href="#">向智慧</a>
                  <a class="dropdown-item" href="#">王晓瑞</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">照片墙</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">课程心得</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- 主体部分 -->
    <main>
      <!-- 精彩作业 -->
      <section class="lunbo">
        <div
          id="carouselExampleCaptions"
          class="carousel slide"
          data-ride="carousel"
        >
          <ol class="carousel-indicators">
            <li
              data-target="#carouselExampleCaptions"
              data-slide-to="0"
              class="active"
            ></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img
                src="/shouye/image/lunbo01.JPG"
                class="d-block w-100"
                alt="hugo静态页面"
              />
              <div class="carousel-caption">
                <a href="https://yangpengkai.gitee.io/hugopractice/"
                  ><h3>使用hugo工具搭建的静态博客</h3></a
                >
              </div>
            </div>
            <div class="carousel-item">
              <img
                src="/shouye/image/lunbo02.JPG"
                class="d-block w-100"
                alt="bootstrap实践"
              />
              <div class="carousel-caption d-none d-md-block">
                <a href="11/index.html"><h3>采用bootstrap框架搭建的网站</h3></a>
              </div>
            </div>
            <div class="carousel-item">
              <img
                src="/shouye/image/jianli01.JPG"
                class="d-block w-100"
                alt="简单的简历"
              />
              <div class="carousel-caption d-none d-md-block">
                <a href="Biographie/index.html"
                  ><h3>简单的网页简历的制作</h3></a
                >
              </div>
            </div>
          </div>
          <a
            class="carousel-control-prev"
            href="#carouselExampleCaptions"
            role="button"
            data-slide="prev"
          >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a
            class="carousel-control-next"
            href="#carouselExampleCaptions"
            role="button"
            data-slide="next"
          >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </section>
      <!-- 作业展示 -->
      <section class="all">
        <!-- html作业 -->
        <div class="" id="homework-html">
          <!-- <div class="container"> -->
            <div class="row html-learn">
              <div class="col"><h3>HTML学习</h3></div>
              <div class="col">
                <div class="card border border-secondary" style="width: 18rem;">
                  <img
                    src="shouye/image/no1.JPG"
                    class="card-img-top"
                    alt="html简单元素了解"
                  />
                  <div class="card-body">
                    <p class="card-text">
                     <a href="01/index.html">HTML基础元素的学习了解</a> 
                    </p>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card border border-secondary " style="width: 18rem;">
                  <img
                    src="shouye/image/no2.JPG"
                    class="card-img-top"
                    alt="html内容元素学习"
                  />
                  <div class="card-body">
                    <p class="card-text"><a href="02/index.html">HTML内容组织文本、语义元素</a> 
                    </p>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card border border-secondary" style="width: 18rem;">
                  <img
                    src="shouye/image/no3.JPG"
                    class="card-img-top"
                    alt="html嵌入元素和表单元素学习"
                  />
                  <div class="card-body">
                    <p class="card-text">
                     <a href="03/index.html">HTML嵌入、表单元素</a> 
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="homework-css">
<div class="row css-learn">
  <div class="col">
    <h3>css学习</h3>
  </div>
  <div class="col">
    <div class="card border border-secondary" style="width: 18rem;">
      <img src="shouye/image/no4.JPG" class="card-img-top" alt="css介绍以及选择符" />
      <div class="card-body">
        <p class="card-text">
        <a href="04/index.html"> css介绍以及选择符</a> 
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card border border-secondary " style="width: 18rem;">
      <img src="shouye/image/no5.JPG" class="card-img-top" alt="css盒模型" />
      <div class="card-body">
        <p class="card-text">
        <a href="06/box.html">css盒模型</a>  
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card border border-secondary" style="width: 18rem;">
      <img src="shouye/image/no6.JPG" class="card-img-top" alt="css动画" />
      <div class="card-body">
        <p class="card-text">
         <a href="08/index.html">使用css制作简单动画</a> 
        </p>
      </div>
    </div>
  </div>
</div>
</div>
        </div>
        <div id="homework-js">
<div class="row js-learn">
  <div class="col">
    <h3>其他学习</h3>
  </div>
  <div class="col">
    <div class="card border border-secondary" style="width: 18rem;">
      <img src="shouye/image/no7.JPG" class="card-img-top" alt="js基础" />
      <div class="card-body">
        <p class="card-text">
        <a href="12/index.html">JavaScript基础语法学习</a>  
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card border border-secondary " style="width: 18rem;">
      <img src="shouye/image/no8.JPG" class="card-img-top" alt="D3学习" />
      <div class="card-body">
        <p class="card-text">
         <a href="17/d3shujv.html">D3制作简单的可视化数据</a> 
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card border border-secondary" style="width: 18rem;">
      <img src="shouye/image/no9.JPG" class="card-img-top" alt="python基础" />
      <div class="card-body">
        <p class="card-text">
         <a href="20/index.html">python基础知识</a> 
        </p>
      </div>
    </div>
  </div>
</div>
</div>
        </div>
      </section>
      <!-- 作业表格 -->
      <div class="container">
        <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">homework</th>
            <th scope="col">content</th>
            <th scope="col">Producer</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td><a href="00/README.md">第一次作业</a></td>
            <td>课程期望</td>
            <td>@Alexander</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td><a href="01/index.html">第二次作业</a></td>
            <td>HTML基础</td>
            <td>@Alexander</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td><a href="02/index.html">第三次作业</a></td>
            <td>HTML基础</td>
            <td>@Alexander</td>
          </tr>
                  <tr>
                    <th scope="row">4</th>
                    <td><a href="03/index.html">第四次作业</a></td>
                    <td>HTML基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">5</th>
                    <td><a href="04/index.html">第五次作业</a></td>
                    <td>CSS基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">6</th>
                    <td><a href="05/css.html">第六次作业</a></td>
                    <td>CSS选择符</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">7</th>
                    <td><a href="06/box.html">第七次作业</a></td>
                    <td>CSS盒模型</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">8</th>
                    <td><a href="07/index.html">第八次作业</a></td>
                    <td>CSS定位和布局</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">9</th>
                    <td><a href="08/index.html">第九次作业</a></td>
                    <td>css动画</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">10</th>
                    <td><a href="09/index.html">第十次作业</a></td>
                    <td>CSS-flexbox</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">11</th>
                    <td><a href="10/index.html">第十一次作业</a></td>
                    <td>Bootstrap基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">12</th>
                    <td><a href="11/index.html">bootstrap网站实例</a></td>
                    <td>Bootstrap网站首页</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">13</th>
                    <td><a href="11/news.html">新闻正文实践</a></td>
                    <td>Bootstrap网站正文</td>
                    <td>@Alexander</td>
                  </tr>
                    <th scope="row">16</th>
                    <td><a href="12/index.html">第十六次作业（JS练习）</a></td>
                    <td>JS基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">17</th>
                    <td><a href="13/index.html">第十七次作业</a></td>
                    <td>JS基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">18</th>
                    <td><a href="14/index.html">第十八次作业</a></td>
                    <td>JS全局对象</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">19</th>
                    <td><a href="15/shijian.html">第十九次作业</a></td>
                    <td>SVG基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">20</th>
                    <td><a href="16/zhuzhuangtu.html">第二十次作业</a></td>
                    <td>D3.JS可视化</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">21</th>
                    <td><a href="17/index.html">第二十一次作业</a></td>
                    <td>D3.JS数据</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">22</th>
                    <td><a href="18/d3svg.html">第二十二次作业</a></td>
                    <td>D3.JS数据可视化</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">23</th>
                    <td><a href="20/index.html">第二十三次作业</a></td>
                    <td>Python基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">24</th>
                    <td><a href="21/getQScommunication.py">第二十四次作业</a></td>
                    <td>Python实践</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">25</th>
                    <td><a href="22/vuejs.html">第二十五次作业（VUE.JS）</a></td>
                    <td>VUE.JS基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">26</th>
                    <td><a href="23/vuejs2.html">第二十六次作业部分</a></td>
                    <td>VUE.JS基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">27</th>
                    <td><a href="24/index.html">第二十七次作业</a></td>
                    <td>VUE.JS事件</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">28</th>
                    <td><a href="">第二十八次作业</a></td>
                    <td>node.js基础</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">29</th>
                    <td><a href="https://yangpengkai.gitee.io/hugopractice">blog</a></td>
                    <td>hugo个人博客</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">30</th>
                    <td><a href="markdownlearn/markdown.md">markdown学习</a></td>
                    <td>markdown语法学习</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">31</th>
                    <td><a href="Biographie/index.html">个人简历</a></td>
                    <td>个人的简历制作</td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">32</th>
                    <td></td>
                    <td></td>
                    <td>@Alexander</td>
                  </tr>
                  <tr>
                    <th scope="row">33</th>
                    <td></td>
                    <td></td>
                    <td>@Alexander</td>
                  </tr>
        </tbody>
      </table>
    </div>
    </main>
    <!-- 页脚部分 -->
    <footer>
      <section class="container-fluid contact p-5">
        <div class="row">
          <div class="col-lg-6 text-center">
            <img src="shouye/image/yejiao.jpg" alt="二维码" />
          </div>
          <div class="col-lg-3">
            <h3 class="mb-4" style="padding-top: 50px;">了解更多</h3>
            <ul class="list-unstyled">
              <li>成员介绍</li>
              <li>集体回忆</li>
              <li>课程作业</li>
              <li>课程心得</li>
            </ul>
          </div>
          <div class="col-lg-3">
            <h3 class="mb-4" style="padding-top: 50px;">关于未来</h3>
            <ul class="list-unstyled">
              <li>我们的歌</li>
              <li>我们的目标</li>
              <li>我们的。。。</li>
            </ul>
          </div>
        </div>
      </section>
      <section class="container-fluid copyright">
        <!-- 注意这里！！！ -->
        <p class="text-right">我的青春记忆，希望自己未来不负自己的期望</p>
      </section>
    </footer>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="shouye/JS/index.js"></script>
  </body>
</html>
